export default {
  name: 'params',
  data () {
    return {
      activeName: 'first',
      cateList: [],
      manyParamsList: [],
      cateChecked: [1, 3, 6],
      addParamsInfo: '',
      inputVisible: false
    }
  },
  created () {
    // 请求级联菜单所需要的数据
    this.getCateList()
    // 请求动态展开项数据
    this.getParamsInfo()
    // 请求静态展开数据
    this.getOnlyParamsInfo()
  },
  methods: {
    // 强求所有分类列表
    async getCateList () {
      const { data } = await this.$get('categories', { params: { type: 3 } })
      // 赋值操作
      console.log(data)
      this.cateList = data
    },
    // 请求动态展开项数据
    async getParamsInfo () {
      const { data } = await this.$get(`categories/${this.cateChecked[2]}/attributes`, { params: { sel: 'many' } })
      this.manyParamsList = data
    },
    // 请求静态参数
    async getOnlyParamsInfo () {
      console.log('获取静态参数')
    },
    // 删除单个动态数据
    async deleteInfoHandler (vals, item, name, attrId) {
      const res = vals.split(',').filter(t => t !== item).join()
      /* eslint-disable quote-props */

      const { meta } = await this.$put(`categories/${this.cateChecked[2]}/attributes/${attrId}`, {
        'attr_name': name,
        'attr_sel': 'many',
        'attr_vals': res
      })
      console.log(meta)

      if (meta.status === 200) {
        this.$message({
          type: 'success',
          message: `修改 ${name} 参数信息成功`
        })
        const info = this.manyParamsList.find(item => item.attr_id === attrId)
        info.attr_vals = res
      }
    },
    // 添加动态参数
    showEditTagHandler () {
      this.inputVisible = true
    },
    // 添加参数信息
    async addParamsInfoHandler (val) {
      console.log('你要添加')
      console.log('要添加的内容 : ', this.addParamsInfo)
      console.log('id : ', this.cateChecked[2])
      console.log('attrId : ', val.attr_id)
      console.log('attr_name : ', val.attr_name)
      console.log('attr_sel : ', val.attr_sel)
      console.log('attr_vals : ', val.attr_vals)
      const addStr = this.addParamsInfo.trim()
      // 判断你填写的内容如果是一个 空字符串, 那么什么都不做
      if (addStr === '') {
        this.inputVisible = false
        this.addParamsInfo = ''
        return
      }
      // 判断你填写的内容元数据里面是否存在了
      if (val.attr_vals.indexOf(addStr) !== -1) {
        this.inputVisible = false
        this.addParamsInfo = ''
        this.$message({
          type: 'warning',
          message: '该条信息已经存在，请重试'
        })
        return
      }
      // 增加信息
      val.attr_vals.push(addStr)
      const { meta } = await this.$put(`categories/${this.cateChecked[2]}/attributes/${val.attr_id}`, {
        'attr_name': val.attr_name,
        'attr_sel': 'many',
        'attr_vals': val.attr_vals.join()
      })
      if (meta.status === 200) {
        this.$message({
          type: 'success',
          message: '添加信息成功'
        })
        this.inputVisible = false
        this.addParamsInfo = ''
      }
    }
  },
  watch: {
    cateChecked: {
      handler () {
        this.getParamsInfo()
        this.getOnlyParamsInfo()
      }
    },
    deep: true
  },
  computed: {
    randerParamsInfoList: {
      get () {
        const res = this.manyParamsList.map(item => {
          const info = { ...item }
          info.attr_vals = item.attr_vals.split(',')
          return info
        })
        return res
      }
    }
  }
}
